<template>
  <el-table
    v-bind="$attrs"
    :data="data"
    :height="height"
    :max-height="maxHeight"
    :stripe="stripe"
    :border="border"
    :size="size"
    :fit="fit"
    :show-header="showHeader"
    :highlight-current-row="highlightCurrentRow"
    :current-row-key="currentRowKey"
    :row-class-name="rowClassName"
    :row-style="rowStyle"
    :cell-class-name="cellClassName"
    :cell-style="cellStyle"
    :header-row-class-name="headerRowClassName"
    :header-row-style="headerRowStyle"
    :header-cell-class-name="headerCellClassName"
    :header-cell-style="headerCellStyle"
    :row-key="rowKey"
    :empty-text="emptyText"
    :default-expand-all="defaultExpandAll"
    :expand-row-keys="expandRowKeys"
    :default-sort="defaultSort"
    :tooltip-effect="tooltipEffect"
    :show-summary="showSummary"
    :sum-text="sumText"
    :summary-method="summaryMethod"
    :span-method="spanMethod"
    :select-on-indeterminate="selectOnIndeterminate"
    :indent="indent"
    :lazy="lazy"
    :load="load"
    :tree-props="treeProps"
    @select="handleSelect"
    @select-all="handleSelectAll"
    @selection-change="handleSelectionChange"
    @cell-mouse-enter="handleCellMouseEnter"
    @cell-mouse-leave="handleCellMouseLeave"
    @cell-click="handleCellClick"
    @cell-dblclick="handleCellDblclick"
    @row-click="handleRowClick"
    @row-contextmenu="handleRowContextmenu"
    @row-dblclick="handleRowDblclick"
    @header-click="handleHeaderClick"
    @header-contextmenu="handleHeaderContextmenu"
    @sort-change="handleSortChange"
    @filter-change="handleFilterChange"
    @current-change="handleCurrentChange"
    @header-dragend="handleHeaderDragend"
    @expand-change="handleExpandChange"
  >
    <slot />
  </el-table>
</template>

<script>
export default {
  name: 'MyElTable',
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      default: () => []
    },
    height: {
      type: [String, Number],
      default: undefined
    },
    maxHeight: {
      type: [String, Number],
      default: undefined
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['large', 'default', 'small'].includes(value)
      }
    },
    fit: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    currentRowKey: {
      type: [String, Number],
      default: undefined
    },
    rowClassName: {
      type: [String, Function],
      default: undefined
    },
    rowStyle: {
      type: [Object, Function],
      default: undefined
    },
    cellClassName: {
      type: [String, Function],
      default: undefined
    },
    cellStyle: {
      type: [Object, Function],
      default: undefined
    },
    headerRowClassName: {
      type: [String, Function],
      default: undefined
    },
    headerRowStyle: {
      type: [Object, Function],
      default: undefined
    },
    headerCellClassName: {
      type: [String, Function],
      default: undefined
    },
    headerCellStyle: {
      type: [Object, Function],
      default: undefined
    },
    rowKey: {
      type: [String, Function],
      default: undefined
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    expandRowKeys: {
      type: Array,
      default: undefined
    },
    defaultSort: {
      type: Object,
      default: undefined
    },
    tooltipEffect: {
      type: String,
      default: 'dark',
      validator: (value) => {
        return ['dark', 'light'].includes(value)
      }
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    sumText: {
      type: String,
      default: '合计'
    },
    summaryMethod: {
      type: Function,
      default: undefined
    },
    spanMethod: {
      type: Function,
      default: undefined
    },
    selectOnIndeterminate: {
      type: Boolean,
      default: true
    },
    indent: {
      type: Number,
      default: 16
    },
    lazy: {
      type: Boolean,
      default: false
    },
    load: {
      type: Function,
      default: undefined
    },
    treeProps: {
      type: Object,
      default: () => ({
        hasChildren: 'hasChildren',
        children: 'children'
      })
    }
  },
  emits: [
    'select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave',
    'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick',
    'header-click', 'header-contextmenu', 'sort-change', 'filter-change', 'current-change',
    'header-dragend', 'expand-change'
  ],
  methods: {
    handleSelect(selection, row) {
      this.$emit('select', selection, row)
    },
    handleSelectAll(selection) {
      this.$emit('select-all', selection)
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    handleCellMouseEnter(row, column, cell, event) {
      this.$emit('cell-mouse-enter', row, column, cell, event)
    },
    handleCellMouseLeave(row, column, cell, event) {
      this.$emit('cell-mouse-leave', row, column, cell, event)
    },
    handleCellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    },
    handleCellDblclick(row, column, cell, event) {
      this.$emit('cell-dblclick', row, column, cell, event)
    },
    handleRowClick(row, column, event) {
      this.$emit('row-click', row, column, event)
    },
    handleRowContextmenu(row, column, event) {
      this.$emit('row-contextmenu', row, column, event)
    },
    handleRowDblclick(row, column, event) {
      this.$emit('row-dblclick', row, column, event)
    },
    handleHeaderClick(column, event) {
      this.$emit('header-click', column, event)
    },
    handleHeaderContextmenu(column, event) {
      this.$emit('header-contextmenu', column, event)
    },
    handleSortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order })
    },
    handleFilterChange(filters) {
      this.$emit('filter-change', filters)
    },
    handleCurrentChange(currentRow, oldCurrentRow) {
      this.$emit('current-change', currentRow, oldCurrentRow)
    },
    handleHeaderDragend(newWidth, oldWidth, column, event) {
      this.$emit('header-dragend', newWidth, oldWidth, column, event)
    },
    handleExpandChange(row, expandedRows) {
      this.$emit('expand-change', row, expandedRows)
    }
  }
}
</script> 